<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Taco Cloud</title>
    <link rel="stylesheet" th:href="@{/styles.css}"/>
</head>
    <body>
        <form method="post" th:action="@{/orders}" th:object="${order}">
            <h1>Order your taco creations!</h1>
            <img th:src="@{static/image/TacoCloud.jpg}">

<!--            错误提醒-->
            <div th:if="${#fields.hasErrors()}">
                <span class="validationError">
                    Please correct the problems below and resubmit.
                </span>
            </div>

            <h3>Deliver my taco masterpieces to...</h3>

            <lable for="name">Name:</lable>
            <input type="text" th:field="*{name}">
            <span class="validationError" th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></span>
            <br/>

            <lable for="street">Street address:</lable>
            <input type="text" th:field="*{street}">
            <span class="validationError" th:if="${#fields.hasErrors('street')}" th:errors="*{street}"></span>
            <br/>

            <lable for="city">City:</lable>
            <input type="text" th:field="*{city}">
            <span class="validationError" th:if="${#fields.hasErrors('city')}" th:errors="*{city}"></span>
            <br/>

            <lable for="state">State:</lable>
            <input type="text" th:field="*{state}">
            <span class="validationError" th:if="${#fields.hasErrors('state')}" th:errors="*{state}"></span>
            <br/>

            <lable for="zip">Zip code:</lable>
            <input type="text" th:field="*{zip}">
            <span class="validationError" th:if="${#fields.hasErrors('zip')}" th:errors="*{zip}"></span>
            <br/>

            <h3>Here's how I'll pay...</h3>

            <lable for="ccNumber">Credit Card #:</lable>
            <input type="text" th:field="*{ccNumber}">
            <span class="validationError" th:if="${#fields.hasErrors('ccNumber')}" th:errors="*{ccNumber}"></span>
            <br/>

            <lable for="ccExpriction">Expriction:</lable>
            <input type="text" th:field="*{ccExpiration}">
            <span class="validationError" th:if="${#fields.hasErrors('ccExpiration')}" th:errors="*{ccExpiration}"></span>
            <br/>

            <lable for="ccCVV">CVV:</lable>
            <input type="text" th:field="*{ccCVV}">
            <span class="validationError" th:if="${#fields.hasErrors('ccCVV')}" th:errors="*{ccCVV}"></span>
            <br/>

            <input type="submit" value="Submit order">
        </form>
    </body>
</html>
